﻿<div class="data @Class" style="@Style" id="@Id">
    <header class="header">
        <Space Size="@("8")" Class="desktop-phone-flex">
            <SpaceItem>
                <i class="light" @onclick="@OnDelete"
                   style="background-color: #fd6458;">
                </i>
            </SpaceItem>
            <SpaceItem>
                <i class="light"
                   @onclick="@(string.IsNullOrEmpty(Title) ? 
                    OnMinimize :
                    new EventCallback(this, (MouseEventArgs _) => _isShowTitle = !_isShowTitle))"
                   style="background-color: #ffbf2b;">
                </i>
            </SpaceItem>
            <SpaceItem>
                <i class="light" @onclick="@(FullScreen ? new EventCallback(this,(MouseEventArgs _) => _isFullScreen = !_isFullScreen) : OnFullScreen)"
                   style="background-color: #24cc3d;">
                </i>
            </SpaceItem>
        </Space>
        <nav class="navbar">
            @if (_isShowTitle)
            {
                <Title Level="4">@Title</Title>
            }
            else
            {
                @Extra
            }
        </nav>
    </header>
    <main class="context @ContextClass" style="@ContextStyle">
        @Context
    </main>
</div>

@code {
    [Parameter] public RenderFragment? Extra { get; set; }

    [Parameter] public RenderFragment? Context { get; set; }

    [Parameter] public string? Class { get; set; }

    [Parameter] public string? Style { get; set; }

    [Parameter] public string? ContextClass { get; set; }

    [Parameter] public string? ContextStyle { get; set; }

    [Parameter] public string? Id { get; set; }

    [Parameter] public EventCallback OnDelete { get; set; }
    [Parameter] public EventCallback OnMinimize { get; set; }
    [Parameter] public EventCallback OnFullScreen { get; set; }
    [Parameter] public string? Title { get; set; }
    [Parameter] public bool FullScreen { get; set; }
    private bool _isShowTitle = false;
    private bool _isFullScreen;
}

<style>
    .data {
        border-radius: 10px;
        background-color: #fff;
    }

    .light {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }
    
    .light:hover{
        cursor: pointer;
    }

    .light:hover+:before{
        content: 'X';
    }

    header {
        overflow: hidden;
        /* 防止子元素超出边界 */
        display: flex;
        scroll-snap-align: end;
    }

    .header{
        color: #f5f5f7;
        p{
            color: #191c1f;
        }
        /* 添加圆角 */
        overflow: hidden;
        /* 防止子元素超出边界 */
        display: flex;
        scroll-snap-align: end;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
    }

    .context{
        margin: 10px;
    }

    @@media screen and (max-width: 768px)  {
        .data{
            border-radius : 0;
        }
    }

    
</style>

<style>
     .layout-context-body{
         @if (_isFullScreen)
         {
             @("padding: 0 !important;")
         }
     }
</style>